<style>
</style>
<template>
    <ly-page>
        <ly-navi title="提示"></ly-navi>
        <ly-page-content>
            <ly-tip>
                <p>
                    正常我们使用 ele 对话框会将 弹出框写到当前页面,这种写法不太优雅
                </p>
                <p>
                    当页面有很多抽屉时会导致页面 dom 变多,并且抽屉的 create 函数可能会被提前运行
                </p>
                <p>
                    我们应该在页面需要显示弹出框时才动态创建弹出框,并将抽屉的 dom 插入到 dom 中
                </p>
                <p>
                    当抽屉关闭时销毁抽屉并移除 dom 元素
                </p>

                <p>
                   同时我们提供了 ly-drawer-footer组件
                </p>
            </ly-tip>
            <el-button @click="showDrawer()" type="primary">显示默认抽屉</el-button>
            <ly-code-view>
                <pre v-pre>
               //参数1 弹出框组件路径   以/开头为 根路径查找 不以/开头只找相对路径
               //参数2 传参
               //参数3 回调事件
               Ly.pop('comp/test_drawer', {name: '测试传参'}, {
                        'submit': function (msg) {
                            console.log(this);
                            alert(msg);
                        }
                    })
               //抽屉中获取参数定义
                  props: {
                    name:String
                 },

               var params = this.name
               //抽屉中事件回调
               this.$emit('submit','测试回调');

                </pre>
            </ly-code-view>
            <h3>comp/test_drawer源码</h3>
            <ly-code-view theme='note' :height="500" v-model="code" hide-close></ly-code-view>


            <ly-markdown>


            <pre v-pre>
            ## `el-drawer`
            ------
            > 我们为 el-dialog 提供内几个新的属性

            #### Attributes

            | 属性名  |说明   | 类型|可选值|默认值|
            | ------------ | ------------ |------------ |------------ |------------ |
            |  max | 可最大化	  |boolean |—	|true	|
            </pre>
            </ly-markdown>

        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    code:''
                }
            },
            created:function (){
                var me = this;
                axios.get(  'comp/test_drawer.html').then(function (rs) {
                    me.code = rs.data;
                });

            },
            mounted: function () {

            },
            methods: {
                showDrawer: function () {
                    Ly.pop('comp/test_drawer', {name: '测试传参'}, {
                        'submit': function (msg) {
                            console.log(this);
                            alert(msg);
                        }
                    })

                },

            }
        }
    })
</script>